<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>淘票票影城系统</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/semantic.min.js}"></script>
</head>
<body>
<div class="ui top attached  menu">
    <a class="ui item button" id="menu_btn"><i class="sidebar icon"></i>菜单 </a>
    <a th:href="@{/admin/logout}" class="right item"><i class="sign-out icon"></i>退出</a>
</div>
<div class="ui  sidebar inverted vertical menu">
    <div class="item">
        <h4 class="ui blue header">影城管理系统</h4>
    </div>
    <a th:href="@{/admin/index}" class="item">首页</a>
    <a th:href="@{/admin/hall}" class="item">影厅管理</a>
    <a th:href="@{/admin/time}" class="item">排片管理</a>
    <a th:href="@{/admin/cinema}" class="active item">影院管理</a>
    <a th:href="@{/admin/orders}" class="item">订单管理</a>
</div>
<div class="m-container-small m-padded-tb-massive">
    <div class="ui container">
        <div class="ui segment" id="information">
            <div class="ui grid">
                <div class="six wide column">
                    <img height="250" width="300" th:src="@{${cinema.image}}">
                </div>
                <div class="ten wide column">
                    <div class="row" th:text="|名称：${cinema.name}|"></div>
                    <div class="row" th:text="|地址：${cinema.address}|"></div>
                    <div class="row" th:text="|联系电话：${cinema.telephone}|"></div>
                </div>
            </div>
        </div>

        <div class="ui segment hide" id="input">
            <form id="cinema-form" th:action="@{/admin/cinema/update}" th:object="${cinema}" method="post" class="ui form">
                <input type="hidden" name="id" th:value="*{id}">
                <div class="required field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">联系电话</label>
                        <input type="text" name="telephone" th:value="*{telephone}" placeholder="请输入联系电话....">
                    </div>
                </div>
                <div class="required field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">详细地址</label>
                        <input type="text" name="address" th:value="*{address}" placeholder="请输入详细地址....">
                    </div>
                </div>
            </form>
        </div>

        <div class="row">
            <button id="change" class="ui center red button">修改信息</button>
            <button id="cancel" class="ui right button hide">取消</button>
            <button id="save"  class="ui right teal button hide">保存修改</button>
        </div>
    </div>
</div>
<script>
    $("#menu_btn").click(function () {
        $(".ui.sidebar")
            .sidebar({
                transition:'slide out'
            })
            .sidebar("toggle");
    });

    $('#change').click(function () {
        $('#information').addClass('hide')
        $('#input').removeClass('hide')
        $('#cancel').removeClass('hide')
        $('#save').removeClass('hide')
        $('#change').addClass('hide')
    })

    $('#cancel').click(function () {
        $('#information').removeClass('hide')
        $('#input').addClass('hide')
        $('#cancel').addClass('hide')
        $('#save').addClass('hide')
        $('#change').removeClass('hide')
    })
    $('#save').click(function () {
        $('#cinema-form').submit();
    })

    $('.ui .form').form({
        fields: {
            telephone: {
                identifier: 'telephone',
                rules: [{
                    type: 'empty',
                    prompt: '联系电话：请输入电话号码'
                }]
            },
            address: {
                identifier: 'address',
                rules: [{
                    type: 'empty',
                    prompt: '详细地址：请输入影院地址'
                }]
            },

        }
    })
</script>
</body>
</html>